<template>
  <div class="wrap">
    <div class="card-table">
      <TableComponent :columns="shareTypeColumns" :data="tableData" :tableOption="tableOption" :stripe="stripe">
        <template slot="id" slot-scope="scopeTag">
          <el-tag v-show="scopeTag.scope.row.flag=='1'" type="success" size="mini">新</el-tag>
        </template>
        <template scope="scope">
          <el-button @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
          <el-button @click="delRow(scope.scope.row)" type="text" size="mini" :disabled="scope.scope.row.flag=='1'?false:true">删除</el-button>
        </template>
      </TableComponent>
    </div>
    <div class="add-form">
      <el-button type="text" @click="handleAdd">新增</el-button>
    </div>
    <el-dialog :title="title" :visible.sync="dialogTableVisible" width="60%" :before-close="handleCancle">
      <el-form id="warning" ref="form" :model="shareTypeForm" label-width="125px" label-position="left" style="padding: 0 30px;" :rules="rules">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="股份类别名称" prop="shareCategoryName" style="margin-bottom: 16px;">
              <el-input v-model="shareTypeForm.shareCategoryName" size="medium" clearable :disabled="isEdit" />
            </el-form-item>
            <el-form-item label="交易类型" prop="transactionType" style="margin-bottom: 16px;">
              <div class="warning-box" v-for="item in transactionTypeOptions" :key="item.index">
                <p>{{formate(shareTypeFormFormal.transactionType, item.code, item.value)}}</p>
              </div>
              <el-select v-model="shareTypeForm.transactionType" placeholder="请选择" size="medium" clearable class="select">
                <el-option
                  v-for="item in transactionTypeOptions"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上市交易所及板块" prop="listedExchange" style="margin-bottom: 16px;">
              <div class="warning-box" v-for="item in listedExchangeOptions" :key="item.index">
                <p>{{formate(shareTypeFormFormal.listedExchange, item.code, item.value)}}</p>
              </div>
              <el-select v-model="shareTypeForm.listedExchange" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in listedExchangeOptions"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上市(挂牌)时间" prop="startDate" style="margin-bottom: 16px;">
              <div v-show="shareTypeFormFormal.startDate!=null" class="warning-box"><p>{{`原值：${shareTypeFormFormal.startDate}`}}</p></div>
              <el-date-picker type="date" v-model="shareTypeForm.startDate" size="medium" clearable format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="每股面值(原币)" prop="priceSharePerOc" style="margin-bottom: 16px;">
              <div v-show="shareTypeFormFormal.priceSharePerOc!=null" class="warning-box"><p>{{`原值：${shareTypeFormFormal.priceSharePerOc}`}}</p></div>
              <el-input v-model="shareTypeForm.priceSharePerOc" size="medium" clearable :disabled="isValueCanuse" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="股份类型" prop="shareType" style="margin-bottom: 16px;">
              <div class="warning-box" v-for="item in shareTypeOption" :key="item.index">
                <p>{{formate(shareTypeFormFormal.shareType, item.code, item.value)}}</p>
              </div>
              <el-select v-model="shareTypeForm.shareType" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in shareTypeOption"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="交易币种" prop="currency" style="margin-bottom: 16px;">
              <div class="warning-box" v-for="item in currencyOptions" :key="item.index">
                <p>{{formate(shareTypeFormFormal.currency, item.code, item.description)}}</p>
              </div>
              <el-select v-model="shareTypeForm.currency" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in currencyOptions"
                  :key="item.index"
                  :label="item.description"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="股票代码" prop="shareCode" style="margin-bottom: 16px;">
              <div v-show="shareTypeFormFormal.shareCode!=null&&''" class="warning-box"><p>{{`原值：${shareTypeFormFormal.shareCode}`}}</p></div>
              <el-input v-model="shareTypeForm.shareCode" size="medium" clearable />
            </el-form-item>
            <el-form-item label="股票简称" prop="shareShortName" style="margin-bottom: 16px;">
              <div v-show="shareTypeFormFormal.shareShortName!=null&&''" class="warning-box"><p>{{`原值：${shareTypeFormFormal.shareShortName}`}}</p></div>
              <el-input v-model="shareTypeForm.shareShortName" size="medium" clearable />
            </el-form-item>
            <el-form-item label="是否有面值" prop="isValue" style="margin-bottom: 16px;">
              <div class="warning-box" v-for="item in options" :key="item.index">
                <p>{{formate(shareTypeFormFormal.isValue, item.value, item.label)}}</p>
              </div>
              <el-select v-model="shareTypeForm.isValue" placeholder="请选择" size="medium" class="select" clearable @change="isValueSelect">
                <el-option
                  v-for="item in options"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import { shareTypeColumns } from '../js/index.js'
import { getSingleShareType, shareTypeMsgOa, delShareType, editShareType, moneyType, selectShareType, selectTransactType, selectListedExchange } from '@/api/modules/propertyRight.js'
import { checkNumber } from '@/utils/pattern.js'
export default {
  components: {
    TableComponent
  },
  data() {
    return {
      shareTypeColumns,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px',
        showTag: true
      },
      stripe: true,
      options: [{
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      currencyOptions: [],
      // dialog=================
      dialogTableVisible: false,
      shareTypeForm: {
        cmhkId: '',
        shareCategoryName: '',
        transactionType: '',
        priceSharePerOc: null,
        shareType: '',
        currency: '',
        isValue: '',
        listedExchange: '',
        startDate: '',
        shareCode: '',
        shareShortName: ''
      },
      shareTypeFormFormal: {},
      title: '',
      shareTypeOption: [],
      transactionTypeOptions: [],
      listedExchangeOptions: [],
      rules: {
        priceSharePerOc: [{ validator: checkNumber, trigger: 'change' }]
      },
      saveCompanyMsg: {
        resource: '',
        taskId: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: '',
        companyCode: '',
        registerName: '',
        editOrAdd: ''
      },
      isEdit: false,
      isValueCanuse: true
    }
  },
  methods: {
    // 格式化报警信息
    formate(text, code, value) {
      if (text == code) {
        return `原值：${value}`
      }
    },
    // 股份类别查询(该方法在父组件中调用)
    getShareType(params) {
      this.saveCompanyMsg = params
      shareTypeMsgOa(params).then(res => {
        if (res.data.code === '0') {
          this.tableData = res.data.body
        }
      })
    },
    // 确定新增/修改股东类别
    handleSubmit() {
      if (this.title === '新增') {
        const obj = Object.assign({}, this.shareTypeForm, this.saveCompanyMsg)
        editShareType(obj).then(res => {
          if (res.data.code === '0') {
            this.$message.success('新增成功')
            this.resetForm('form')
            this.dialogTableVisible = false
            this.getShareType(this.saveCompanyMsg)
          }
        })
      } else if (this.title === '修改') {
        const obj = Object.assign({}, this.shareTypeForm, this.saveCompanyMsg)
        editShareType(obj).then(res => {
          if (res.data.code === '0') {
            this.resetForm('form')
            this.dialogTableVisible = false
            this.getShareType(this.saveCompanyMsg) // 修改成功后重新查询
            this.$message.success('修改成功')
          }
        })
      }
    },
    // 修改股东类别
    editRow(row) {
      if (row.isValue === '1') {
        this.isValueCanuse = false
      } else {
        this.isValueCanuse = true
      }
      this.dialogTableVisible = true
      this.title = '修改'
      this.isEdit = true
      const params = Object.assign({}, row, this.saveCompanyMsg)
      getSingleShareType(params).then(res => {
        if (res.data.code === '0') {
          this.shareTypeForm = res.data.body.temp
          this.shareTypeFormFormal = res.data.body.formal || {}
        }
      })
      this.getSelectData()
    },
    // 点击新增
    handleAdd() {
      this.dialogTableVisible = true
      this.title = '新增'
      this.isEdit = false
      this.getSelectData()
    },
    getSelectData() {
      moneyType().then(res => {
        if (res.data.code === '0') {
          this.currencyOptions = res.data.body
        }
      })
      selectShareType().then(res => {
        if (res.data.code === '0') {
          this.shareTypeOption = res.data.body
        }
      })
      selectTransactType().then(res => {
        if (res.data.code === '0') {
          this.transactionTypeOptions = res.data.body
        }
      })
      selectListedExchange().then(res => {
        if (res.data.code === '0') {
          this.listedExchangeOptions = res.data.body
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleCancle() {
      this.resetForm('form')
      this.shareTypeFormFormal = {}
      this.dialogTableVisible = false
    },
    delRow(row) {
      const data = {
        taskId: row.taskId,
        cmhkId: row.cmhkId,
        shareCategoryName: row.shareCategoryName
      }
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delShareType(data).then(res => {
          if (res.data.code === '0') {
            this.$message.success('删除成功')
            this.getShareType(this.saveCompanyMsg)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    isValueSelect(data) {
      if (data === '1') {
        this.isValueCanuse = false
      } else {
        this.isValueCanuse = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    .card-table {
      width: 100%;
    }
    .add-form {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .select {
      width: 100%;
    }
    .warning-box {
      font-size: 12px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
    .warning-box-required {
      font-size: 12px;
      margin-left: 9px;
      background-color: rgba(225, 101, 49, 0.2);
      border-radius: 3px;
      position: absolute;
      top: -17px;
      left: 0;
      z-index: 1;
      p {
        color: rgba(225, 101, 49);
      }
    }
  }
</style>
<style>
  #warning .el-form-item__content {
    line-height: 17px;
    position: relative;
    font-size: 14px;
  }
</style>
